{* $Id$ *}
{include_core file="admin/lib/header.html" title="快递区域展示"}
<div class="page-header border-bottom clearfix">
  <h2 class="left">快递区域管理<span>{if $express_relation_info}编辑{else}添加{/if}快递区域</span></h2>
  <a href="{AnUrl("express/admin/area?express_id={$express_id}")}" class="btn btn-default btn-sm right">&lt;&nbsp;返回快递区域列表</a>
</div>
<!--start:快递区域新增-->
<style>
  .add-form table tr th{
    width:200px;
    padding:5px 10px;
  }
  .add-form table tr td{
    padding:5px 0px;
  }
  .add-form table tr input, .add-form table tr select{
    float: left;
  }
</style>
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('express/admin/save_area')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="express_relation_id" value="{$express_relation_info.id}">
    <input type="hidden" name="express_id" value="{$express_id}"/>
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label class="add-f-label">快递区域名称：</label></th>
        <td>
          <input name="info[title]" value="{$express_relation_info.title}" type="text" class="add-f-ipt1 js_title">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入快递区域名称</div>
        </td>
      </tr>
      <tr>
        <th><label class="add-f-label">费用计算方式：</label></th>
        <td>
          <select class="add-f-slt1 js_infoType" name="info[type]">
            <option value="1" {if $express_relation_info.type == 1}selected{/if}>按重量计算</option>
            <option value="2" {if $express_relation_info.type == 2}selected{/if}>按商品件数计算</option>
          </select>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>选择并设置费用计算方式</div>
        </td>
      </tr>
      <tr>
        <th><label class="add-f-label">{if $express_relation_info.type == 2}单件商品费用：{else}1000克以内费用：{/if}</label></th>
        <td>
          <input name="info[price]" value="{$express_relation_info.price}" type="text" class="add-f-ipt1 js_price">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>{if $express_relation_info.type == 2}请输入单件商品费用{else}请输入1000克以内费用{/if}</div>
        </td>
      </tr>
      </tr>
      <tr {if $express_relation_info.type == 2}style="display:none"{/if}>
        <th><label class="add-f-label">续重每1000克或其零数的费用：</label></th>
        <td>
          <input name="info[renew_price]" value="{if $express_relation_info.renew_price}{$express_relation_info.renew_price}{else}0{/if}" type="text" class="add-f-ipt1 js_renewPrice">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入续重每1000克或其零数的费用</div>
        </td>
      </tr>
      <tr>
        <th><label class="add-f-label">免费额度：</label></th>
        <td>
          <input name="info[free_price]" value="{if $express_relation_info.free_price}{$express_relation_info.free_price}{else}1000000000{/if}" type="text" class="add-f-ipt1 js_freePrice">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入免费额度</div>
        </td>
      </tr>
    </table>
    <input type="hidden" name="provincial_ids" value="" class="js_provnicailIds"/>
  </form>
  <div style="width:100%; height:1px;background: #EBEBEB;"></div>
  <style>
    .label{
      display: block;
      float: left;
      width:auto;
      padding:10px;
      text-align: left;
      color:#000;
      border:1px solid #EBEBEB;
      background: #FBFBFB;
      margin:0px 10px 10px 0px;
      height:14px;
      line-height: 14px;
      overflow: hidden;
      font-weight: 100;
      font-size:14px;
    }
    .label input{
      margin-right: 5px;
    }
    .province-info div{
      width:220px;
      float: left;
    }
    .province-info select{
      width:160px;
      height:auto;
      margin-right: 10px;
    }
  </style>
  <div style="padding:10px 0px; width:100%;">
    <h3>所辖地区：</h3>
    <div class="js_arerList" style="padding:10px 0px 0px 0px; height:auto;overflow: hidden;">
      {foreach $provincial_list as $k=>$v}
      <label class="label"><input type="checkbox" value="{$v.id}" checked/>{$v.title}</label>
      {/foreach}
    </div>
    <div class="province-info js_sltProvince" id="addressSlt">
      <div>
        省份：
        <select id="prov" size="10"></select>
      </div>
      <div>
        城市：
        <select id="city" size="10"></select>
      </div>
      <div>
        区县：
        <select id="dist" size="10"></select>
      </div>
      <div>
        <a href="javascript:void(0);" class="btn btn-primary js_addProvince">+</a>
        <a href="javascript:void(0);" class="btn btn-info js_refreshProvince">重置</a>
      </div>
    </div>
  </div>
  <div style="width:100%; height:1px;background: #EBEBEB;clear: both;"></div>
  <div style="width:100%; text-align: center; margin-top:10px;">
    <button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button>
  </div>
</div>
<!--end:快递区域新增-->
{load_js file="address/AjaxAddress.js"}
<script>
  $(function(){
    var newAddress = new AjaxAddress({
      'url'          : siteUrl+'/provincial/get_provincial',
      'parentEle'    : '#addressSlt',
      'province'     : '#prov',
      'city'         : '#city',
      'district'     : '#dist',
      'prov_title'   : '省/直辖市',
      'city_title'   : '市',
      'dist_title'   : '区/县'
    });

    // 重置
    $('.js_refreshProvince').on('click', function(){
      newAddress.resetDefault(0,0,0);
    });

    // 添加地址
    $('.js_addProvince').on('click', function(){
      var prov = parseInt($('#prov').val());
      var city = parseInt($('#city').val());
      var dist = parseInt($('#dist').val());
      var ids  = getIds();
      var id = '',title = '';

      if (!isNaN(dist) && dist) {
        id = dist;
        title = $('#dist>option:checked').html();
      } else if (!isNaN(city) && city) {
        id = city;
        title = $('#city>option:checked').html();
      } else if (!isNaN(prov) && prov) {
        id = prov;
        title = $('#prov>option:checked').html();
      }

      if (!id || !title) {
        showMsg('请选择需要添加的区域');
        return;
      }

      if (inArray(id, ids)) {
        $('.js_arerList input[value='+id+']').attr('checked', 'checked');
      } else {
        $('.js_arerList').append('<label class="label"><input type="checkbox" value="'+id+'" checked/>'+title+'</label>');
      }
    });

    // 选择方式
    $('.js_infoType').on('change', function(){
      var type = $(this).val();
      if (type == 1) {
        $('.js_renewPrice').closest('tr').show();
        $('.js_price').parent().next().html('<span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入1000克以内费用');
        $('.js_price').closest('tr').find('label').html('1000克以内费用：');
      } else {
        $('.js_renewPrice').closest('tr').hide();
        $('.js_price').parent().next().html('<span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入单件商品费用');
        $('.js_price').closest('tr').find('label').html('单件商品费用：');
      }
    });

    // 提交验证
    $('.js_submit').click(function(e){
      var ids   = getIds(1);
      var title = $.trim($('.js_title').val());

      $('.js_provnicailIds').val(ids.join(','));
      if (!title) {
        showMsg('标题不能为空');
        return;
      }
      if (getFontNum(title) > 30) {
        showMsg('标题不能超过30字');
        return;
      }

      $('.js_creatForm').submit();
    });
  });

function inArray(id, ids)
{
  if (!id || !ids) {
    return false;
  }
  var idsLen = ids.length;

  for (var i = 0; i <idsLen; i++) {
    if (ids[i] == id) {
      return true;
    }
  }

  return false;
}

function getIds(hasChecked)
{
  var ids = new Array();
  $('.js_arerList input').each(function(){
    var id = parseInt($(this).val());
    if (!isNaN(id) && id){
      if (hasChecked) {
        if ($(this).get(0).checked) {
          ids.push(id);
        }
      } else {
        ids.push(id);
      }
    }
  });

  return ids;
}
</script>
{include_core file="admin/lib/footer.html"}